import React, { Component } from 'react';
import { WhiteSpace, List, InputItem, Toast } from 'antd-mobile';
import { withRouter } from 'react-router-dom';
import YwxNavBar from '../../components/common/YwxNavBar/YwxNavBar';
import YwxButton from '../../components/common/YwxButton/YwxButton';

class Modiciation extends Component {


    constructor(props) {
        super(props);
        this.state = {
            confirmPassword: '',
            different: false,
            formData: {
                originalPassword: '',
                password: '',
            }
        }

        this.submit = React.$utils.throttle(this.submit, 2000);
    };

    passwordChange = (value) => {
        this.setState({
            formData: {
                ...this.state.formData,
                password: value
            }
        });
    };
    confirmPasswordChange = (value) => {
        this.setState({
            confirmPassword: value
        });
    };
    confirmPasswordBlur = () => {
        if (this.state.confirmPassword !== this.state.formData.password) {
            this.setState({
                different: true
            });
        } else {
            this.setState({
                different: false
            });
        }
    };
    originalPasswordChange = (value) => {
        this.setState({
            formData: {
                ...this.state.formData,
                originalPassword: value
            }
        });
    }


    validate = (callback) => {
        let {
            formData,
            confirmPassword
        } = this.state;
        let {
            originalPassword,
            password,
        } = formData;

        let msg = '';
        if (!originalPassword) {
            msg = '请输入原始密码';
        } else if (!password) {
            msg = '请输入密码';
        } else if (password !== confirmPassword) {
            msg = '两次密码不一致';
        }

        if (msg) {
            Toast.fail(msg)
        } else {
            callback && callback();
        }
    }

    submit = () => {
        this.validate(() => {
            let {
                originalPassword,
                password
            } = this.state.formData

            React.$utils.request({
                url: '/app/modify',
                method: 'put',
                data: {
                    originalPassword,
                    password
                }
            }).then(res => {
                res.msg && Toast.success(res.msg);
                this.props.history.go(-1);
            })
        });
    }



    render() {


        return (
            <div>
                <YwxNavBar>修改密码</YwxNavBar>
                <WhiteSpace />
                <List>
                    <InputItem onChange={this.originalPasswordChange} value={this.state.formData.originalPassword} type='password'>原始密码</InputItem>
                    <InputItem onChange={this.passwordChange} value={this.state.formData.password} type='password'>新密码</InputItem>
                    <InputItem onChange={this.confirmPasswordChange} value={this.state.confirmPassword} error={this.state.different} onBlur={this.confirmPasswordBlur} type='password' >确认密码</InputItem>
                </List>
                <YwxButton onClick={this.submit} style={{ marginTop: '1rem' }}>确认修改</YwxButton>
            </div>
        );
    }
}

export default withRouter(Modiciation)